<!DOCTYPE html>
<html>
<head>
    <title>AI视觉客流分析系统</title>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="edge"/>
    <link rel="shortcut icon" href="img/avatar.png">
    <link rel="stylesheet" href="css/css.css">
    <script src="js/jq.js"></script>
</head>
<body>
<div id="page">
    <header>
        <div>
            <h1><b>AI</b> 视觉客流分析系统</h1>
        </div>
        <div id="now_time">
            <small>0000年00月00日 / 周</small>
            <time class="es">00:00:00</time>
        </div>
    </header>

    <section>
        <div class="left">
            <div class="total">
                <div class="square"><i></i></div>
                <ul>
                    <li id="todayJoinCount">今日观展人数: <b class="es">0</b></li>
                    <li id="nowCount">馆内当前人数: <b class="es">0</b></li>
                    <li>人均参观时间: <b class="es" id="averageTime">0</b><span>分钟</span></li>
                    <li>
                        逗留最久人员:
                        <b class="es" id="longest">__ <span>0</span></b>
                        <span style="color: #208772">分钟</span>
                    </li>
                    <li>
                        逗留最短人员:
                        <b class="es" id="shortest">__ <span>0</span></b>
                        <span style="color: #208772">分钟</span>
                    </li>
                </ul>
            </div>
            <div class="box peak-hour">
                <div class="title">
                    <div class="square"><i></i></div>
                    <h3>今日高峰时段 <br><small>TODAY PEAK HOURS</small></h3>
                    <b>千人 / 时间</b>
                </div>
                <div id="echart1" class="chart"></div>
            </div>
            <div class="box day-stay">
                <div class="title">
                    <div class="square"><i class=""></i></div>
                    <h3>环比单日逗留 <br><small>COMPARE WITH DAY STAY</small></h3>
                    <b>百分比 / 小时</b>
                </div>
                <div id="echart2" class="chart"></div>
            </div>
        </div>
        <div class="center">
            <div class="box log">
                <div class="title">
                    <div class="square"><i></i></div>
                    <h3>进出日志 <br><small>VISITING LOG</small></h3>
                    <b>全部入口</b>
                </div>
                <div class="people">
                    <div class="in">
                        <div class="headimg"></div>
                        <h5 class="es">__ <time>00:00:00</time></h5>
                        <b>入</b>
                    </div>
                    <div class="out">
                        <div class="headimg"></div>
                        <h5 class="es">__ <time>00:00:00</time></h5>
                        <b>出</b>
                    </div>
                </div>
                <div class="table">
                    <div class="th">
                        <div class="td1">时间</div>
                        <div class="td2">识别信息</div>
                    </div>
                    <ul id="log_ul"></ul>
                </div>
            </div>
        </div>
        <div class="right">
            <div class="box server-status">
                <div class="title">
                    <div class="square"><i></i></div>
                    <h3>单日访客量 <br><small>SERVER STATUS</small></h3>
                    <b>千人 / 日期</b>
                </div>
                <div id="echart3" class="chart"></div>
            </div>
            <div class="box entrances-traffic">
                <div class="title">
                    <div class="square"><i></i></div>
                    <h3>出入口流量 <br><small>ENTRANCES TRAFFIC</small></h3>
                    <b>出入口 / 千人</b>
                </div>
                <div id="echart4" class="chart"></div>
            </div>
            <div class="box total-traffic">
                <div class="title">
                    <div class="square"><i></i></div>
                    <h3>进出总量 <br><small>TOTAL TRAFFIC</small></h3>
                    <b>上午08:00 - 现在</b>
                </div>
                <div style="height:calc(100% - 53px);overflow: hidden">
                    <div id="echart5_1" class="chart"></div>
                    <div id="echart5_2" class="chart"></div>
                    <div id="echart5_3" class="chart"></div>
                </div>
            </div>
        </div>
    </section>
</div>
<script src="js/echarts.min.js"></script>
<script src="js/func.js"></script>
<script src="js/js.js"></script>
</body>
</html>
